<html>
<head>
<title>AdubyTree Style Demo</title>

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.adubytree.js" type="text/javascript"></script>
<link rel="StyleSheet" href="themes/adubytree.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){ 
	var jsondata ={id : "node-0" , data: "C:",
				children: [
					{ id : "node-1" ,data: "node1",
						children: [
							{ id : "node-1-1" ,data: "node1.1",
								children: [
								{ id : "node-1-1-1" ,data: "node1.1.1"},
								{ id : "node-1-1-2" ,data: "node1.1.2"}
								]},
							{id : "node-1-2" , data: "node1.2"},
							{id : "node-1-3" ,data: "node1.3"}
						] 
					},
					{id : "node-2" ,data: "node2"},
					{id : "node-3", data: "node3",
						children: [
							{ id : "node-3-1" ,data: "node3.1",
							children: [
								{id : "node-3-1-1" , data: "node3.1.1",
									children: [
										{ id : "node-3-1-1-1" , data: "node3.1.1-1"},
										{ id : "node-3-1-1-2" , data: "node3.1.1-2"}
									] 
								}
							] 
							}
						] 
					}
				] 
			};

 	var Aduby=$("#adubytreeSimple").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		treeType:"simple",
		onSelected:function(node){	
			//alert(node.id);
		}
		});
		
		
	$("#adubytreeStrengthen").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		treeType:"strengthen",
		onClick:function(node){	
			//alert(node.id);
		}
		});

	$("#adubytreeExtend").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		treeType:"extend",
		checkboxPos :"after",//before
		onSelected:function(node){	
			//alert(node.id);
		},
		onClick:function(node){	
			//alert(node.id);
		},
		onMouseOver:function(node){	
			//alert(node.id);
		}
		,onMouseOut:function(node){	
			//alert(node.id);
		},
		onDblClick:function(node){	
			//alert(node.id);
		},
		onCBXClick:function(node){	
			//alert(node.id);
		},
		onCBXDblClick:function(node){	
			//alert(node.id);
		}
		});
	$("#adubytreeAfter").AdubyTree({
		dataType:"json",
		checkboxes:true,
		data:jsondata,
		treeType:"extend",
		contextmenu:true,
		checkboxPos     :"after",
		onMouseOut:function(node){	
			//alert(node.id);
		}
		});
	$("#openAll").click(function(){
			$("#adubytreeExtend").openAll();
	});		
	$("#closeAll").click(function(){
			$("#adubytreeExtend").closeAll();
	});
	var  i=1;
	$("#add").click(function(){
		var node ={ 
			id : $("#adubytreeExtend").getSelected()+ "-" +i++ , 
			data: $("#adubytreeExtend").getSelected()+ "-" + i,
			icons: "images/open.png"
		};
		$("#adubytreeExtend").addNode(node,$("#adubytreeExtend").getSelected());	
	});			
	$("#remove").click(function(){
			$("#adubytreeExtend").removeNode($("#adubytreeExtend").getSelected());
	});	
	$("#refresh").click(function(){
			$("#adubytreeExtend").refresh();
	});	
	$("#getSelected").click(function(){
			alert($("#adubytreeExtend").getSelected());
	});	
	
	$("#getChecked").click(function(){
		alert($("#adubytreeExtend").getChecked());
	});		
	$("#modify").click(function(){
		var node ={ 
			id : $("#adubytreeExtend").getSelected(), 
			data: $("#adubytreeExtend").getSelected()+ "-1"
		};
		$("#adubytreeExtend").modify($("#adubytreeExtend").getSelected(),node);	
	});	
	
	});

</script>
<style type="text/css">   
table, td {   
    border:1px solid #cccccc;   
    border-collapse:collapse;  
}   
</style>
</head>
<body >
<div align="center">
|<a href="./styledemo.html">AdubyTree Style</a>|<a href="./themesdemo.html">AdubyTree Themes</a>|<a href="./ajaxdemo.html">AdubyTree Ajax Demo</a>|<a href="./demo.html">AdubyTree Local Data</a>|
<table border="1">
	<tr>
		<td width="280px" bgcolor="#FFFFFF"><div align="center"><strong>Simple Style</strong></div></td>
		<td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Strengthen Style</strong></div></td>
		<td width="280px" bgcolor="#FFFFFF"><div align="center" ><strong>Extend Style</strong></div></td>
		<td width="280px" bgcolor="#FFFFFF"> <div align="center" ><strong>Extend Style with CheckBox After and Contextmenu</strong></div></td>
	</tr>
	<tr>
		<td valign ="top">
			<div id="adubytreeSimple" ></div><br>
			<a  id="openAll">openAll</a>
			<br/><a  id="closeAll">closeAll</a>
			<br/><a  id="add">add new node</a>
			<br/><a  id="modify">modify</a>
			<br/><a  id="remove">remove node</a>
			<br/><a  id="refresh">refresh</a>
			<br/><a  id="getChecked">getChecked</a>
			<br/><a  id="getSelected">getSelected</a>		</td>
		<td  valign ="top"><div id="adubytreeStrengthen"></div></td>
		<td valign ="top"><div id="adubytreeExtend"></div></td>
		<td valign ="top"><div id="adubytreeAfter"></div></td>
	</tr>
</table> 
	<ul id="myMenu" class="contextMenu">
		<li class="edit"><a href="#edit">Edit</a></li>
		<li class="cut separator"><a href="#cut">Cut</a></li>
		<li class="copy"><a href="#copy">Copy</a></li>
		<li class="paste"><a href="#paste">Paste</a></li>
		<li class="delete"><a href="#delete">Delete</a></li>
		<li class="quit separator"><a href="#quit">Quit</a></li>
	</ul>
</div>
</body>
</html>